<template>
  <el-dialog :title="title" :visible="visible" append-to-body @close="close">
    <el-form
      ref="form"
      :model="entityData"
      label-width="80px"
      label-position="right"
      style="width:90%;margin:0px auto;"
    >
      <el-form-item label="类别" prop="category">
        <dictionary-radio-group
          v-model="entityData.category"
          :code="constant.DICTIONARY_TYPE_CODES.WORKFLOW_LISTENER_CATEGORY"
          class="form-item"
          :readonly="categoryReadonly"
          @change="categoryChange"
        />
      </el-form-item>
      <el-form-item label="事件" prop="event">
        <dictionary-radio-group
          v-if="updateFlag"
          v-model="entityData.event"
          :readonly="eventReadonly"
          :code="eventCode"
          class="form-item"
        />
      </el-form-item>
      <el-form-item label="类型" prop="listenerType">
        <dictionary-radio-group
          v-model="entityData.listenerType"
          :code="constant.DICTIONARY_TYPE_CODES.WORKFLOW_LISTENER_TYPE"
          class="form-item"
          @change="listenerTypeChange"
        />
      </el-form-item>
      <el-form-item label="监听器" prop="listenerCode">
        <el-select v-model="entityData.listenerCode" clearable @change="listenerChange">
          <el-option
            v-for="item in listenerList"
            :key="item.content"
            :value="item.content"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>

import DictionaryRadioGroup from '@/components/popsoft/DictionarySelect/DictionaryRadioGroup'
export default {
  components: {

    DictionaryRadioGroup

  },
  data() {
    return {
      visible: false,
      // 模式
      mode: '',
      // 只读
      readonly: false,

      // 事件类型编码
      eventCode: '',
      categoryReadonly: false,
      eventReadonly: false,
      elementType: '',
      // 监听器列表
      listenerList: [],
      // 监听器数据
      entityData: {

        // 流程定义标识
        processDefinitionId: '',
        // 元素标识
        definitionKey: '',
        // 类别
        category: '',
        // 事件
        event: '',
        // 监听器类型
        listenerType: '',
        // 监听器名称
        listenerName: '',
        // 监听器编码
        listenerCode: ''

      },
      updateFlag: false,
      rules: {
        // 前端验证规则
        category: [
          { required: true, message: '请选择类别', trigger: 'blur' }
        ],
        event: [
          { required: true, message: '请选择事件', trigger: 'blur' }
        ],
        listenerType: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
        listenerCode: [
          { required: true, message: '请选择触发器', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      let text = ''
      if (this.mode === 'add') {
        text = '新增'
      } else if (this.mode === 'modify') {
        text = '修改'
      } else if (this.mode === 'view') {
        text = '查看'
      }
      return text
    }
  },
  watch: {
    'entityData.category': {
      immediate: true,
      handler: 'categoryChange'
    }
  },
  methods: {
    add(elementType, processDefinitionId, definitionKey) {
      this.entityData.processDefinitionId = processDefinitionId
      this.entityData.definitionKey = definitionKey

      this.elementType = elementType
      this.mode = 'add'
      if (elementType === 'bpmn:SequenceFlow') {
        // 条件边 ，只能设置事件类型为take的执行监听器
        // TODO:此处设置属性值，并没有触发change事件，原因不明，最终使用watch实现
        this.entityData.category = 'EXECUTION'
        this.categoryReadonly = true
      } else if (elementType === 'bpmn:UserTask') {
        this.entityData.category = 'TASK'
        this.categoryReadonly = true
      }
      this.visible = true
    },
    modify(item) {
      this.mode = 'modify'
      this.entityData = item
      this.visible = true
    },
    // 根据类别变化自动加载不同的事件类型
    categoryChange(value) {
      this.updateFlag = false
      if (value === 'TASK') {
        this.eventCode = this.constant.DICTIONARY_TYPE_CODES.TASK_LISTENER_EVENT_CATEGORY
        this.eventReadonly = false
      } else if (value === 'EXECUTION') {
        this.eventCode = this.constant.DICTIONARY_TYPE_CODES.EXECUTION_LISTENER_EVENT_CATEGORY
        if (this.elementType === 'bpmn:SequenceFlow') {
          this.entityData.event = 'TAKE'
          this.eventReadonly = true
        }

        this.getListenerData()
      }
      this.updateFlag = true
    },
    listenerTypeChange() {
      // 清空选择
      this.entityData.listenerName = ''
      this.entityData.listenerCode = ''
      this.getListenerData()
    },
    listenerChange(value) {
      this.entityData.listenerName = this.getLabel(value)
    },

    // 获取监听器
    getListenerData() {
      if (this.entityData.category && this.entityData.listenerType) {
        this.listenerList = []
        const params = {
          category: this.entityData.category,
          type: this.entityData.listenerType,
          status: this.constant.STATUS.NORMAL

        }
        this.$api.workflow.workflowListener.list(params).then(res => {
          this.listenerList = res.data
        })
      }
    },
    // 关闭
    close() {
      this.visible = false
    },
    // 保存
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.mode === 'add') {
            this.$api.workflow.workflowListenerConfig.add({ data: this.entityData }).then(() => {
              this.$emit('ok')
              this.close()
            })
          } else {
            this.$api.workflow.workflowListenerConfig.modify({ data: this.entityData }).then(() => {
              this.$emit('ok')
              this.close()
            })
          }
        }
      })
    },
    getLabel(value) {
      const item = this.listenerList.find(x => x.content === value)
      if (item) {
        return item.name
      }
      return ''
    }

  }

}
</script>

<style lang="scss">
</style>
